﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - ComboBox Cell Type</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    
    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <style type="text/css">
    /*css_begin*/
        input[type="text"] {
            width: 120px;
        }

        select {
            width: 124px;
        }

        label {
            display:inline-block;
            width: 120px;
        }

        input[type="button"] {
            width: 124px;
        }
    /*css_end*/
    </style>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
            initSpread(spread);
        });

        function Country(shortName, fullName) {
            this.value = this.shortName = shortName;
            this.text = this.fullName = fullName;
        }

        function initSpread(spread) {
            var spreadNS = GcSpread.Sheets;
            var sheet = spread.getActiveSheet();
            sheet.bind(spreadNS.Events.SelectionChanged, function () {
                propertyChange(false);
            });
            sheet.isPaintSuspended(true);

            sheet.setColumnWidth(2, 120);
            sheet.setColumnWidth(1, 200);

            var combo = new spreadNS.ComboBoxCellType();
            combo.items([{ text: "Oranges", value: "11k" }, { text: "Apples", value: "15k" }, { text: "Grape", value: "100k" }])
                .editorValueType(spreadNS.EditorValueType.Text);

            sheet.getCell(1, 2, spreadNS.SheetArea.viewport).cellType(combo).value("Apples");
            sheet.setValue(1, 1, "ComboBoxCellType");
            sheet.setFormula(1, 3, "=C2");

            var editableCombo = new spreadNS.ComboBoxCellType(),
                data = [new Country("CN", "China"), new Country("JP", "Japan"), new Country("US", "United States")];

            editableCombo.editable(true)
                .items(data)
                .itemHeight(24)
                .editorValueType(spreadNS.EditorValueType.Value);

            sheet.getCell(3, 2, spreadNS.SheetArea.viewport).cellType(editableCombo).value("US");
            sheet.setValue(3, 1, "Editable ComboBoxCellType");
            sheet.setFormula(3, 3, "=C4");

            sheet.isPaintSuspended(false);

            $("#changeProperty").click(function () {
                propertyChange(true);
            });

            function propertyChange(isSet) {
                var sheet = spread.getActiveSheet();
                var sels = sheet.getSelections();
                if (sels && sels.length > 0) {
                    var sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
                    var comboBoxCellType = sheet.getCellType(sel.row, sel.col);
                    if (!(comboBoxCellType instanceof spreadNS.ComboBoxCellType)) {
                        $("#changeProperty").attr("disabled", "disabled");
                        return;
                    }
                    if (!isSet) {
                        $("#changeProperty").removeAttr("disabled");
                        $("#selComboCellEditorValueType").val(comboBoxCellType.editorValueType());
                        var items = comboBoxCellType.items(), text = '', value = '';

                        for (var i = 0, len = items.length; i < len; i++) {
                            var item = items[i];
                            if (!item) {
                                continue;
                            }
                            if (item.text) {
                                text += item.text + ',';
                            }
                            if (item.value) {
                                value += item.value + ',';
                            }
                        }
                        $("#txtComboCellItemsText").val(text.slice(0, text.length - 1));
                        $("#txtComboCellItemsValue").val(value.slice(0, value.length - 1));
                        $("#chkEditable").prop("checked", comboBoxCellType.editable());
                        $("#txtItemHeight").val("" + comboBoxCellType.itemHeight());
                    } else {
                        comboBoxCellType.editorValueType(parseInt($("#selComboCellEditorValueType").val()));
                        var itemsText = $("#txtComboCellItemsText").val().split(",");
                        var itemsValue = $("#txtComboCellItemsValue").val().split(",");
                        var itemsLength = itemsText.length > itemsValue.length ? itemsText.length : itemsValue.length;
                        var items = [];
                        for (var count = 0; count < itemsLength; count++) {
                            var t = itemsText.length > count && itemsText[0] != "" ? itemsText[count] : undefined;
                            var v = itemsValue.length > count && itemsValue[0] != "" ? itemsValue[count] : undefined;
                            if (t != undefined && v != undefined) {
                                items[count] = { text: t, value: v };
                            }
                            else if (t != undefined) {
                                items[count] = { text: t };
                            } else if (v != undefined) {
                                items[count] = { value: v };
                            }
                        }
                        comboBoxCellType.items(items);
                        comboBoxCellType.editable($("#chkEditable").prop("checked"));

                        var itemHeight = parseInt($("#txtItemHeight").val(), 10);
                        if (!isNaN(itemHeight) && itemHeight > 0) {
                            comboBoxCellType.itemHeight(itemHeight);
                        }
                    }
                }
                sheet.repaint();
            }

            function getActualRange(range, maxRowCount, maxColCount) {
                var row = range.row < 0 ? 0 : range.row;
                var col = range.col < 0 ? 0 : range.col;
                var rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount;
                var colCount = range.colCount < 0 ? maxColCount : range.colCount;

                return new spreadNS.Range(row, col, rowCount, colCount);
            }
        }
        /*code_end*/
    </script>

</head>
<body>
<div class="sample-turtorial">
    <div id="ss" style="width:100%; height:330px;border: 1px solid gray;"></div>
    <div class="demo-options">
        <div class="option-row">
            <label>EditorValueType: </label>
            <select id="selComboCellEditorValueType">
                <option value="0" selected="selected">Text</option>
                <option value="1">Index</option>
                <option value="2">Value</option>
            </select>
        </div>
        <div class="option-row">
            <label >Items Text:</label>
            <input id="txtComboCellItemsText" type="text" />
        </div>
        <div class="option-row">
            <label>Items Value:</label>
            <input id="txtComboCellItemsValue" type="text" />
        </div>
        <div class="option-row">
            <label>Item Height:</label>
            <input id="txtItemHeight" type="text" />
        </div>
        <div class="option-row">
            <label></label>
            <input type="checkbox" id="chkEditable" />
            <label for="chkEditable">Editable</label>
        </div>
        <div class="option-row">
            <label></label>
            <input type="button" id="changeProperty" value="Update"/>
        </div>
    </div>
</div>
</body>
</html>
